<template>
	<view class="content">
		<view class="date_box">
			<picker mode="date" :value="dateValue" @change="dateChange">
				<view class="date_change">
					<text>{{textDate}}</text>
					<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
				</view>
			</picker>
			<!-- <view class="apply_times">
				{{dateValue}}供应{{jiaList.length}}次
			</view> -->
		</view>
		<view class="supply_list">
			<view class="supply_item" v-for="(item, index) in supplyList" :key="index" ><!-- @click="jumpToDetail(item)" -->
				<custom-card>
					<view class="supply_header">
						<view class="supply_type">
							<text>{{item.cookbookName}}</text>
						</view>
						<view class="supply_result appling">
							<text>{{item.startMealTime + '-' +item.endMealTime}}</text>
						</view>
					</view>
					<view class="supply_description">
						菜谱描述：{{item.description}}
					</view>
					<view v-if="item.deviceList.length>0" class="supply_menus">
						<view class="menu_item" v-for="(menu, inx) in item.deviceList" :key="inx">
							<text>{{menu.name}}</text>
							<text>{{menu.units}}</text>
						</view>
					</view>
					<view class="supply_price">
						<view>
							每份<text class="hint">{{item.deductionAmount}}</text>元定金，<text class="hint">{{item.minQuantity}}</text>份起订，最多<text class="hint">{{item.maxQuantity}}</text>份
						</view>
						<view class="book_btn" @click="bookHandle(item)">
							预约<image class="icon" src="/static/images/buy.png" mode="scaleToFill"></image>
						</view>
					</view>
				</custom-card>
			</view>
		</view>
	</view>
</template>

<script>
	let _this = this
	import {
		getSupplyList,
		createBookedOrder
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast,
		dateFtt,
		mGetDate
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				marchrt: {},
				userInfo: {},
				dateValue: dateFtt('yyyy-MM-dd', new Date()),
				textDate: dateFtt('yyyy年MM月dd日', new Date()),
				supplyList: [],
				height: 0,
			}
		},
		onShow() {
			_this._getSupplyList()
		},
		onLoad(option) {
			_this = this
			this.marchrt = { ...JSON.parse(decodeURIComponent(option.marchrt)) }
			this.userInfo = { ...JSON.parse(decodeURIComponent(option.userinfo)) }
		},
		methods: {
			dateChange(e) {
				_this.dateValue = e.detail.value
				_this.textDate = dateFtt('yyyy年MM月dd日', e.detail.value)
				_this._getSupplyList()
			},
			bookHandle(item){
				createBookedOrder({
					orgId: _this.userInfo.orgId,
					empId: _this.userInfo.empId,
					empName: _this.userInfo.empName,
					merchantCode: item.merchantCode,
					merchantName: item.merchantName,
					merchantArea: _this.marchrt.zoneCode,
					price: item.deductionMode == 20 ? 0 : item.deductionAmount,
					quantity: item.minQuantity,
					amount: item.minQuantity * item.deductionAmount,
					reservationDate: _this.dateValue,
					mealTimesCode: item.familyCode,
					mealTimesName: item.familyName,
					recipeCode: item.cookbookId,
					recipeName: item.cookbookName,
					deductionMode: item.deductionMode
				}).then(res => {
					if (res.resultCode == 0) {
						item = {...item,orderNo: res.data,time: _this.dateValue,orgId: _this.userInfo.orgId, canDo: true}
						uni.navigateTo({
							url: `./bookConfirm?supply=${encodeURIComponent(JSON.stringify(item))}`
						})
					} else {
						_showToast(res.resultMsg)
					}
				  }).catch(err => {
						console.log(err)
				  })
			},
			_getSupplyList(){
				this.jiaList = []
				getSupplyList({
					supplyDate: dateFtt('yyyy-MM-dd', _this.dateValue?_this.dateValue:new Date()),
					merchantCode: this.marchrt.merchantCode
				}).then(res => {
					if (res.code === 0) {
						_this.supplyList = res.data
					}else{
						_showToast('数据加载异常！'+res.msg)
					}
				}).catch(err => { _showToast('数据加载异常！' + err) })
			},
			checkType(type) {
				const checkType = this.askTypes.filter(item => item.value == type)
				return checkType[0].text
			}
		},
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}
	.content{
		height: 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		overflow-y: auto;
		/* padding: 28rpx 32rpx; */
	}
	.date_box{
		padding: 32rpx;
	}
	.down_icon{
		width: 48rpx;
		height: 48rpx;
	}
	.date_change{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}
	.supply_times{
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #6B707A;
		line-height: 40rpx;
	}
	.supply_list{
		padding: 0 32rpx;
		.supply_item{
			margin-bottom: 20rpx;
		}
	}
	.supply_header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		
		&::before{
			content: "";
			display: block;
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #185AFF;
			left: -16rpx;
		}
		.supply_type{
			font-size: 32rpx;
			font-weight: 600;
			color: #3C424F;
			line-height: 44rpx;
		}
		.supply_result{
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FA6400;
			line-height: 40rpx;
		}
		.result_icon{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}
		.supply_result.agree{
			color: #55C976;
		}
		.supply_result.not_agree{
			color: #E02020;
		}
		.supply_result.appling{
			color: #FA6400;
		}
	}
	.supply_description{
		font-size: 32rpx;
		font-weight: 600;
		color: #6B707A;
		line-height: 40rpx;
		padding: 20rpx 0 10rpx 0;
	}
	.supply_menus{
		padding: 20rpx 0;
		.menu_item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			line-height: 48rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	.supply_price{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		font-size: 22rpx;
		font-weight: 500;
		color: #9AA2B2;
		line-height: 34rpx;
		.hint{
			font-size: 30rpx;
			color: #FA6400;
		}
		.book_btn{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 56rpx;
			padding: 0 16rpx;
			background-color: #007AFF;
			color: #FFF;
			border-radius: 56rpx;
			.icon {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>
